import React, {useEffect, useState} from 'react';
import {Breadcrumb, Button, Col, Form, Input, Modal, Row, Space, Select, Table, Pagination} from "antd";
import Divider from "antd/es/divider";
import Toolbar from "../../components/toolbar";
import PaginationBar from "../../components/paginationbar";
import common from "../../common";

function Line(props) {
    const [dataList, setDataList] = useState([])


    let [pagination, setPagination] = useState({
        total: 0,
        page: 1,
        limit: 10,
    })

    const [createForm] = Form.useForm();
    const [searchForm] = Form.useForm();
    const [editForm] = Form.useForm();
    let [query, setQuery] = useState({});
    let [search, setSearch] = useState({})       //搜索内容

    const {Option} = Select;

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '产线名字',
            dataIndex: 'name',
        },
        {
            title: '所属车间',
            dataIndex: 'workshopName',
        },
        {
            title: '产线负责人',
            dataIndex: 'userName',
        },
        {
            title: '操作',//删除编辑操作
            align: "center",
            width: 260,
            fixed: "right",
            render: (text, record, index) => (
                <>
                    <Button type="link" onClick={() => {
                        setEditModalVisible(true)
                        editForm.setFieldsValue(record)
                    }}>编辑</Button>
                    <Button type="link" onClick={() => {
                        props.history.push('/line/'+record.id)
                    }}>详情</Button>
                    <Button type="link" onClick={() => {
                        common.confirm("确定要删除吗?", () => {
                            del(record.id)
                        })
                    }}>删除</Button>
                </>
            ),
        },
    ];
    const del = (id) => {
        common.loadingStart()
        common.ajax("POST", "/front/line/delete", {id}).then(res => {
            common.toast("操作成功")
            init()
        }).finally(common.loadingStop)
    }

    const init = () => {
        let params = {
            ...search,
            page: pagination.page,
            limit: pagination.limit,
        }
        common.ajax("GET", "/front/line/list", params).then(data => {
            setDataList(data.list)
            setPagination(data.pagination)
        })
    }
    const update = (data) => {
        let params = {
            id: data.id,
            name: data.name,
            workshopId: Number(data.workshopId),
            userId: Number(data.userId)
        }
        common.loadingStart()
        common.ajax("POST", "/front/line/update", params).then(res => {
            common.toast("操作成功")
            setEditModalVisible(false)
            init()
        }).finally(common.loadingStop)
    }

    const create = (data) => {
        common.loadingStart()
        common.ajax("POST", "/front/line/create", data).then(res => {
            common.toast("操作成功")
            setCreateModalVisible(false)
            init()
        }).finally(common.loadingStop)
    }

    useEffect(() => {
        init()
        getWorkshops()
        getUsers()
    }, [pagination.page, pagination.limit, search])

    let [workshops, setWorkshops] = useState([]);
    let [users, setUsers] = useState([]);
    //获取车间
    const getWorkshops = () => {
        common.ajax("GET", "/front/workshop/list?limit=100").then(data => {
            setWorkshops(data.list)
        })
    }


    // 获取负责人
    const getUsers = () => {
        common.ajax("GET", "/passport/user/list?limit=100").then(data => {
            setUsers(data.list)
        })
    }

    //----- 弹框
    let [createModalVisible, setCreateModalVisible] = useState(false);
    const [editModalVisible, setEditModalVisible] = useState(false)
    return (
        <div className="line">
            <Breadcrumb>
                <Breadcrumb.Item>设备管理</Breadcrumb.Item>
                <Breadcrumb.Item>产线管理</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
                <div>
                    <Button type="primary"
                            onClick={() => {
                                setCreateModalVisible(true);
                            }}>新增
                    </Button>
                </div>

                <Form form={searchForm} style={{marginTop: 15}}>
                    <Row gutter={24}>
                        <Col span={6}>
                            <Form.Item label="产线名字" name="name">
                                <Input placeholder="名字" onChange={(e) => {
                                    setQuery({...query,name: e.target.value})
                                }}/>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="所属车间" name="workshopId">
                                <Select placeholder="所属车间" onChange={(value) => {
                                    setQuery({...query,workshopId: value})
                                }}>
                                    {workshops.map(item => {
                                        return (<Option key={item.id} value={item.id}>{item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="负责人" name="userId">
                                <Select placeholder="负责人" onChange={(value) => {
                                    setQuery({...query,userId: value})
                                }}>
                                    {users.map(item => {
                                        return (<Option key={item.id} value={item.id}>{item.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item>
                                <Space>
                                    <Button onClick={() => {
                                        setSearch(query)
                                    }}>搜索</Button>
                                    <Button onClick={() => {
                                        let emptySearch = {
                                            name: '',
                                            workshopId: '',
                                            userId: '',
                                        }
                                        searchForm.setFieldsValue(emptySearch)
                                        emptySearch = {}
                                        setSearch(emptySearch)
                                        setQuery(emptySearch)
                                    }}>清空</Button>
                                </Space>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                <Table rowKey={columns => columns.id} dataSource={dataList} columns={columns} pagination={false}/>
                {pagination.total < 5 ? '' :
                    <PaginationBar>
                        <Pagination
                            style={{marginTop: 25}}
                            pageSizeOptions={['10', '15', '20', '5']}
                            onChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            onShowSizeChange={(page, limit) => {
                                setPagination({...pagination, page, limit})
                            }}
                            showTotal={total => `共${total}条`}
                            total={pagination.total}
                            defaultCurrent={pagination.page}
                            current={pagination.page}
                            defaultPageSize={pagination.limit}
                            showSizeChanger
                            showQuickJumper/>
                    </PaginationBar>}
                <Modal
                    visible={createModalVisible}
                    title="添加产线"
                    destroyOnClose={true}
                    footer={false}
                    maskClosable={false}
                    onCancel={() => {
                        setCreateModalVisible(false)
                    }}
                ><Form preserve={false}
                       labelCol={{span: 6}}
                       wrapperCol={{span: 16}}
                       form={createForm}
                       onFinish={(values) => {
                           create(values)
                       }}>
                    <Form.Item rules={[{required: true, message: '请输入产线名称'}]}
                               label="产线名字" name="name">
                        <Input/>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择所属车间'}]}
                               name="workshopId"
                               label="所属车间">
                        <Select placeholder="所属车间">
                            {workshops.map(item => {
                                return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择负责人'}]}
                               name="userId"
                               label="车间负责人">
                        <Select placeholder="负责人">
                            {users.map(item => {
                                return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 6, span: 18}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
                </Modal>

                <Modal
                    visible={editModalVisible}
                    title="编辑"
                    footer={false}
                    maskClosable={false}
                    onCancel={() => {
                        setEditModalVisible(false)
                    }}
                ><Form labelCol={{span: 6}}
                       wrapperCol={{span: 16}}
                       form={editForm}
                       onFinish={(values) => {
                           update(values)
                       }}>
                    <Form.Item hidden={true} name="id">
                        <Input/>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请输入产线名称'}]}
                               label="产线名字" name="name">
                        <Input/>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择所属车间'}]}
                               name="workshopId"
                               label="所属车间">
                        <Select placeholder="所属车间">
                            {workshops.map(item => {
                                return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item rules={[{required: true, message: '请选择负责人'}]}
                               name="userId"
                               label="车间负责人">
                        <Select placeholder="负责人">
                            {users.map(item => {
                                return (<Option key={item.id} value={item.id}> {item.name}</Option>)
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 6, span: 18}}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
                </Form>
                </Modal>
            </div>
        </div>
    );
}

export default Line;